<template>
    <div class="infoBox settle-sub-box">
        <div class="timeInfo clearfix" v-if="registerData[0]">
            <flexbox>
                <flexbox-item class="month">
                    <div class="flex-demo">
                        <div v-if="dateCurrent">{{dateCurrent.month}}</div>
                        月
                    </div>
                </flexbox-item>
                <flexbox-item v-for="(item,index) in registerData" :key="index"
                              :class="{active: item.active}" class="day">
                    <div class="day" @click="getMonth(item)">
                        <div class="week">{{item.week}}</div>
                        <div class="num">{{item.day}}</div>
                        <div class="canRegister" :class="{error: !item.canRegister}">{{item.canRegister ? '有号' :
                            '无号'}}
                        </div>
                    </div>
                </flexbox-item>
            </flexbox>
        </div>
        <div class="detailsBox clearfix" @click="personalInfo(item)" v-for="(item,index) in doctorList" :key="index">
            <div class="photoLeft">
                <div class="img">
                    <el-image v-if="item.avatar"
                              fit="contain"
                              :src="item.avatar? ('/_api' + item.avatar): '/static/images/doctor.png'">
                        <div slot="placeholder" class="image-slot">
                            <i class="el-icon-loading"></i>
                        </div>
                        <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline"></i>
                        </div>
                    </el-image>
                    <img src="/static/images/doctor.png" class="el-image" fit="contain" v-else>
                </div>
            </div>
            <div class="infoRight">
                <div class="top clearfix">
                    <div v-if="canAppointment(item,1)" class="tip">预约挂号</div>
                    <div v-else-if="canAppointment(item,2)" class="tip full">已约满</div>
                    <!--                    <div v-else-if="item.scheduleState==3&&item.replaceDoctorId" class="tip disable"></div>-->
                    <div v-else class="tip disable">已停诊</div>
                    <div class="name">
                        <span>{{item.name}}</span>
                        <span class="price" v-if="item.price || item.price == 0">￥{{item.price.toFixed(2)}}</span>
                        <i class="iconfont icon-replace tab"
                           v-if="item.suspendService === 4 && item.replaceDoctorId"></i>
                        <!--                        <div v-if="item.suspendService === 4 && item.replaceDoctorId" class="tab">-->
                        <!--&lt;!&ndash;                            <div>替</div>&ndash;&gt;-->
                        <!--                        </div>-->
                    </div>
                </div>
                <div class="bot two-single-line">
                    {{item.introduction}}
                </div>
            </div>
        </div>
        <div class="empty" v-if="!doctorList[0]">
            该科室暂无排班信息
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
    import {Flexbox, FlexboxItem} from 'vux'

    export default {
        data() {
            return {
                registerData: [], // 日期列表
                dept: '',
                dateCurrent: null, // 当前选择日期
                doctorList: [] // 医生列表
            }
        },
        mounted() {
            if (this.$route.query.dept) this.dept = this.$route.query.dept
            this.getRegisterInfo()
        },
        methods: {
            canAppointment(item, type) {
                if (item) {
                    if (item.scheduleState === type && (item.suspendService === 1 || (item.suspendService === 4 && item.replaceDoctorId))) {
                        return true
                    }
                }
            },
            personalInfo(item) {
                if (this.canAppointment(item, 1) || this.canAppointment(item, 2)) {
                    this.$router.push({
                        path: this.$route.path + '/personalInfo',
                        query: {
                            dept: this.dept,
                            date: this.dateCurrent.date,
                            id: item.doctorId,
                            userPatientId: this.$route.query.userPatientId
                        }
                    })
                }
            },
            getRegisterInfo() {
                this.$http.get('/doctor/appointment/registerInfoOfDepartment', {
                    dept: this.dept
                }).then(result => {
                    if (result.success) {
                        let selected = false, _this = this
                        result.data.forEach((e, index) => {
                            if (!selected && e.canRegister) {
                                e.active = true
                                selected = true
                                _this.getMonth(e)
                            } else {
                                e.active = false
                            }
                        })
                        this.registerData = result.data
                    }
                })
            },
            getMonth(item) {
                if (this.dateCurrent && this.dateCurrent.date === item.date) return false
                // if (!item.canRegister) return false
                this.registerData.map(e => {
                    e.active = false
                    return e
                })
                item.active = true
                this.dateCurrent = item
                this.$http.get('/doctor/appointment/registerInfoOfDepartmentAndDay', {
                    date: item.date,
                    dept: this.dept
                }).then(result => {
                    if (result.success) {
                        this.doctorList = result.data
                    }
                })
            }
        },
        components: {
            Flexbox,
            FlexboxItem
        }
    }
</script>

<style scoped lang="less">
    .infoBox {
        width: 100%;
        height: 100%;
        background-color: #f4f4f4;

        .timeInfo {
            width: 100%;
            margin-bottom: .02rem;
            padding: .05rem 0;
            background-color: #fff;
            font-size: .24rem;

            .month {
                line-height: .56rem;
                text-align: center;
                padding: 0 .08rem 0 .03rem;
                width: 12.5%;

                > div {
                    border-right: 1px solid #ddd;
                }
            }

            .day {
                text-align: center;
                margin: 0 .1rem;
                padding: .06rem 0;

                .num {
                    line-height: .4rem;
                }

                .canRegister {
                    &.error {
                        color: #FF7C98;
                    }
                }

                &.active {
                    background-color: #6691FF;
                    color: #fff;

                    .canRegister {
                        &.error {
                            color: #fff;
                        }
                    }
                }
            }
        }

        .detailsBox {
            width: 100%;
            height: 2rem;
            padding: .3rem .2rem;
            margin-bottom: .02rem;
            background-color: #fff;

            .photoLeft {
                float: left;
                width: 1rem;
                height: 100%;
                margin-right: .2rem;

                .img {
                    width: 1rem;
                    height: 1rem;
                    background-color: #eee;
                    border-radius: 50%;
                    overflow: hidden;

                    .el-image {
                        width: 100%;
                        height: 100%;
                    }
                }
            }

            .infoRight {
                margin-left: 1.1rem;

                .top {
                    height: .5rem;
                    margin-bottom: .05rem;
                    
                    .price {
                        float: right;
                        color: #FF993C;
                        font-weight: bold;
                    }

                    .name {
                        margin-right: 1.4rem;
                        height: .5rem;
                        line-height: .5rem;
                        font-size: .32rem;

                        > * {
                            display: inline-block;
                            vertical-align: middle;
                        }
                    }

                    .tip {
                        float: right;
                        padding: .06rem .1rem;
                        margin-top: .02rem;
                        background-color: rgb(84, 114, 245);
                        color: #fff;
                        border-radius: .05rem;
                        font-size: .24rem;
                        line-height: .32rem;

                        &.disable {
                            background-color: #ccc;
                        }

                        &.full {
                            background-color: #FFB566;
                        }
                    }

                    /*.tab {*/
                    /*    width: .4rem;*/
                    /*    height: 100%;*/
                    /*    display: inline-flex;*/
                    /*    font-size: .24rem;*/
                    /*    !* border-radius: 50%; *!*/
                    /*    !* text-align: center; *!*/
                    /*    !* line-height: .4rem; *!*/
                    /*    !* margin-top: .05rem; *!*/
                    /*    vertical-align: top;*/
                    /*    align-items: center;*/
                    /*    justify-content: center;*/

                    /*    > div {*/
                    /*        color: #fff;*/
                    /*        background-color: #6691FF;*/
                    /*        width: .36rem;*/
                    /*        height: .36rem;*/
                    /*        text-align: center;*/
                    /*        line-height: .36rem;*/
                    /*        border-radius: 50%;*/
                    /*    }*/
                    /*}*/

                    .tab {
                        color: #6691FF;
                        font-size: .36rem;
                    }
                }

                .bot {
                    color: #999;
                    width: auto;
                }
            }
        }

        .empty {
            margin-top: 10vw;
            text-align: center;
            color: #999;
        }
    }
</style>
